<template>
  <div class="fw" style="height: 100%">
    <div
      class="fcbc"
      :style="{
        flex: 2,
        padding:
          getscalepxc(10) + ' 0px ' + getscalepxc(10) + ' ' + getscalepxc(6),
      }"
    >
      <!-- <btnlist :btlist="btnlist" @btnclick="btnclick"> </btnlist> -->
      <!-- <div v-for="item in btnlist" class="labelitem" :style="{
        backgroundImage: 'url(/configuration/2d/' + 'li1' + '.png)'
      }">
        <div v-html="item">

        </div>
      </div> -->
      <div
        class="fwwsbcwh1 labelitem"
        v-for="item in btnlist"
        :style="{
          backgroundImage: 'url(/configuration/2d/' + 'li1' + '.png)',
          fontSize: getscalepxc(10),
          fontWeight: 'bold',
          padding: getscalepxc(3),
        }"
      >
        <div v-html="item">
          <!-- 供温
          <span style="color: #28C3F6">
            ℃
          </span> -->
        </div>
        <div :style="{
          color: getlabelcolor()
        }">{{_.random(1,100)}}</div>
      </div>
    </div>
    <tongyongbasechart
      :options="options"
      :style="{
        flex: 8,
      }"
    />
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "guodianshujuchart",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      header: [],
      datalist: [],
      btnlist: [
        "供温<span style='color: #28C3F6'>℃</span>",
        "回温<span style='color: #28C3F6'>℃</span>",
        "供压<span style='color: #28C3F6'>MPa</span>",
        "回压<span style='color: #28C3F6'>MPa</span>",
        "流量<span style='color: #28C3F6'>t/h</span>",
        "热量<span style='color: #28C3F6'>MW</span>",
      ],
      options: {},
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.options = {
      backgroundColor: "#0000",
      color: ["#FFFC9B", "#4FC8FF", "#5BFBCB", "#ECAE33", "#F5745F", "#AA86F3"],
      legend: {
        show: "true",
        data: ["供温", "回温", "供压", "回压", "流量", "热量"],
        selected: {},
        icon:
          "path://M467.106909 581.073455l-107.636364-108.311273a55.645091 55.645091 0 1 0-78.94109 78.475636l148.154181 149.085091a55.458909 55.458909 0 0 0 40.680728 16.663273 55.389091 55.389091 0 0 0 39.982545-17.966546l278.039273-298.426181a55.645091 55.645091 0 1 0-81.454546-75.869091L467.130182 581.073455zM139.636364 0h744.727272a139.636364 139.636364 0 0 1 139.636364 139.636364v744.727272a139.636364 139.636364 0 0 1-139.636364 139.636364H139.636364a139.636364 139.636364 0 0 1-139.636364-139.636364V139.636364a139.636364 139.636364 0 0 1 139.636364-139.636364z",
        // right: 0
      },
      title: {
        // subtext: 'GB/日',
        // left: 'center',
        // top: '10px',
        // text: 'nameSpace Top5',
      },
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        axisLabel: {
          // rotate: 45,
        },
        splitLine: { show: false },
        type: "category",
        // name: '时间',
        boundaryGap: false,
        data: ["0", "2", "4", "6", "8", "10", "12"],
      },
      yAxis: [
        {
          name: "℃",
          type: "value",
          splitLine: { show: false },
        },
        {
          name: "MPa",
          type: "value",
          splitLine: { show: false },
        },
      ],
      series: [
        {
          name: "供温",
          type: "line",
          yAxisIndex: 0,
          data: [
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
          ],
          smooth: true,
          areaStyle: {
            color: "#FFFC9B33"
          },
        },
        {
          name: "回温",
          type: "line",
          yAxisIndex: 0,
          data: [
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
            _.random(0, 100),
          ],
          smooth: true,
          areaStyle: {
            color: "#4FC8FF33"
          },
        },
        {
          name: "供压",
          type: "line",
          yAxisIndex: 1,
          data: [
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
          ],
          smooth: true,
          areaStyle: {
            color: "#5BFBCB33"
          },
        },
        {
          name: "回压",
          type: "line",
          yAxisIndex: 1,
          data: [
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
          ],
          smooth: true,
          areaStyle: {
            color: "#ECAE3333"
          },
        },
        {
          name: "流量",
          type: "line",
          yAxisIndex: 1,
          data: [
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
          ],
          smooth: true,
          areaStyle: {
            color: "#F5745F33"
          },
        },
        {
          name: "热量",
          type: "line",
          yAxisIndex: 1,
          data: [
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
            _.random(0.0, 1.0, true),
          ],
          smooth: true,
          areaStyle: {
            color: "#AA86F333"
          },
        },
      ],
    };
  },
  methods: {
    getlabelcolor(){
      return '#' + _.random(0, 555555);
    },
    btnclick(type) {
      console.log(type);
    },
  },
};
</script>
<style lang='scss'>
.labelitem {
  // width: ;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
// .tbdengji{
//   border: ${this.getscalepxc(1)} solid ${this.getLevelStyle()};
//   border-radius: 5px;
//   color: ${this.getLevelStyle()};
// }
.tbcommon {
}
.tbshuzhi {
}
</style>